<script lang="ts" setup name="XtxCity">
import { ref } from 'vue';

import { onClickOutside } from '@vueuse/core'
import axios from 'axios';
// 城市列表类型
export type AreaList = {
    code: string
    level: number
    name: string
    areaList: AreaList[]
}
// 1.省市区区间的显示与隐藏
const flag = ref(false)
const toggle = () => {
    if (!flag.value) {
        cityList.value = cacheList.value
    }
    flag.value = !flag.value
}
// 点击外面，关闭弹窗
const target = ref(null)
onClickOutside(target, () => {
    // console.log("点击了外面")
    flag.value = false
    cityList.value = cacheList.value
})

// 2.获取省市区数据
// 2.1 发送请求获取到所有的省市区数据(1次) ***
// 2.2 第一次获取省, 点击省获取市,点击市获取去(3次)
// 2.3 因为省市爱数据相对稳定,有常量保存省市区数据

// 2.4 点击关闭时,盒子是点错了,要重新获取所有的数据
const cityList = ref<AreaList[]>([])
const cacheList = ref<AreaList[]>([])
const getCityList = async () => {
    const res = await axios.get<AreaList[]>(
        'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json'
    )
    cityList.value = res.data
    cacheList.value = res.data
}
getCityList()

// 选择城市
const changeResult = ref({
    provinceCode: '',
    provinceName: '',
    cityCode: '',
    cityName: '',
    countyCode: '',
    countyName: ''
})
// 3.点击省市区的业务
function selectCity(item: AreaList) {
    if (item.level === 0) {
        // 省
        changeResult.value.provinceName = item.name
        changeResult.value.provinceCode = item.code
        cityList.value = item.areaList
    }
    if (item.level === 1) {
        // 市
        changeResult.value.cityName = item.name
        changeResult.value.cityCode = item.code
        cityList.value = item.areaList
    }
    if (item.level === 2) {
        // 县（区）
        changeResult.value.countyName = item.name
        changeResult.value.countyCode = item.code
        // 关闭弹窗
        flag.value = false
    }
}
</script>

<template>
    <div class="xtx-city" ref="target">
        <div class="select" @click="toggle" :class="{ active: flag }">
            <span class="placeholder">请选择配送地址</span>
            <span class="value"></span>
            <i class="iconfont icon-angle-down"></i>
        </div>
        <div class="option" v-show="flag">
            <span class="ellipsis" @click="selectCity(item)" v-for="item in cityList"
                :key="item.code">{{ item.name }}</span>
        </div>
    </div>
</template>

<style scoped lang="less">
.xtx-city {
    display: inline-block;
    position: relative;
    z-index: 400;

    .select {
        border: 1px solid #e4e4e4;
        height: 30px;
        padding: 0 5px;
        line-height: 28px;
        cursor: pointer;

        &.active {
            background: #fff;
        }

        .placeholder {
            color: #999;
        }

        .value {
            color: #666;
            font-size: 12px;
        }

        i {
            font-size: 12px;
            margin-left: 5px;
        }
    }

    .option {
        width: 542px;
        border: 1px solid #e4e4e4;
        position: absolute;
        left: 0;
        top: 29px;
        background: #fff;
        min-height: 30px;
        line-height: 30px;
        display: flex;
        flex-wrap: wrap;
        padding: 10px;

        >span {
            width: 130px;
            text-align: center;
            cursor: pointer;
            border-radius: 4px;
            padding: 0 3px;

            &:hover {
                background: #f5f5f5;
            }
        }
    }
}
</style>
